<template>
    <div class="container">
        <!-- <h1>实时监测</h1> -->

        <div id="main1"></div>

        <div id="littleframe">
            <div id="main2"></div>
            <div id="main3"></div>
            <div id="main4"></div>
        </div>


    </div>

</template>


<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts";
import 'echarts-liquidfill'
export default {
    name: "real-time",
    data() {
        return {
            socket: null,
            value: null,
        };
    },
    methods: {
        Pie() { // 外层虚线圈数据
            let dataArr = [];
            for (var i = 0; i < 150; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 50,
                        itemStyle: {
                            color: '#19A4BB',
                            borderWidth: 0,
                            borderColor: 'rgba(0,0,0,0)',
                        },
                    });
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 100,
                        itemStyle: {
                            color: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                            borderColor: 'rgba(0,0,0,0)',
                        },
                    });
                }
            }
            return dataArr;
        },
        Pie2() {
            let dataArr = [];
            for (var i = 0; i < 150; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 25,
                        itemStyle: {
                            normal: {
                                color: "#fff",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 10,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }
            }
            return dataArr
        },
        show(){
            // 监听WebSocket接收消息事件
            this.socket.onmessage = (message) => {
                //console.log('Received data from server:', message.data);
                this.value = JSON.parse(message.data); // 假设服务器发送的是JSON格式数据
                console.log(this.value)
            
            //三个变量
            console.log(this.value)
            var data1=this.value.HMFDiseaseBSTM;//第一个水球的百分比
            var data2=this.value.malariaDiseaseBSTM;//第二个水球的百分比
            var data3=this.value.ScarletDiseaseBSTM;//第三个水球的百分比
            

            //实时指标图
            const itemBarStyle = {
                barWidth: 30,
                barGap: 0.1,
                itemStyle: {
                    normal: {
                        barBorderRadius: [40, 40, 0, 0]
                    }
                }
            }
            var option1 = {
                title: {
                    text: '实时监测',
                    x: 'center',
                    textStyle: {
                        fontSize: 40,
                        color: 'black',
                        fontFamily: '楷体' // 将字体设置为楷体
                    }

                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [
                        '日照时数',
                        'PM2.5',
                        'PM10',
                        'SO2',
                        'NO2',
                        'CO',
                        'O3',
                        '降水量',
                        '平均气温',
                        '平均相对湿度'
                    ]
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                // color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'], // 每个柱状图对应的颜色
                series: [
                    {
                        name: '实时数据',
                        type: 'bar',
                        ...itemBarStyle,
                        data: [
                            { value: this.value.sunshine, itemStyle: { color: '#c23531' } },
                            { value: this.value.PMtwo, itemStyle: { color: '#2f4554' } },
                            { value: this.value.PMten, itemStyle: { color: '#61a0a8' } },
                            { value: this.value.SO2, itemStyle: { color: '#d48265' } },
                            { value: this.value.NO2, itemStyle: { color: '#749f83' } },
                            { value: this.value.CO, itemStyle: { color: '#ca8622' } },
                            { value: this.value.O3, itemStyle: { color: '#bda29a' } },
                            { value: this.value.precipitation, itemStyle: { color: '#6e7074' } },
                            { value: this.value.temperature, itemStyle: { color: '#546570' } },
                            { value: this.value.humidity, itemStyle: { color: '#c4ccd3' } }
                        ] // 每个 x 对应一个 y 的数据，并且每个柱状条的颜色不同
                    }
                ]
            };
            this.myChart1.setOption(option1);
            //第一个水球图
            var value = 0.4;
            var rate = 0.6;
            let option2 = {
                backgroundColor: 'transparent',
                title: [
                    {
                        text: '手足口病实时患病风险',
                        x: 'center',
                        textStyle: {
                            fontSize: 25,
                            color: '#0d2d42',
                            fontFamily: '楷体' // 将字体设置为楷体
                        }

                    }
                ],
                series: [
                    {
                        name: '最外层-虚线',
                        type: 'gauge',
                        radius: '70%',
                        startAngle: 0,
                        endAngle: 360,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            distance: -6,
                            length: 2,
                            lineStyle: {
                                // color: '#2AECFF',
                                width: 5,
                                type: [20],
                                dashOffset: 19,
                                opacity: 0.8
                            },
                            splitNumber: 6
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        }
                    },
                    {
                        type: 'liquidFill',
                        radius: '68%',
                        z: 5,
                        center: ['50%', '50%'],
                        amplitude: 14,
                        backgroundStyle: {
                            color: '#0d2d42'
                        },
                        color: [
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: '#0061A2'
                                    },
                                    {
                                        offset: 0,
                                        color: '#00FFE5'
                                    }
                                ],
                                globalCoord: false
                            },
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: '#0061A2'
                                    },
                                    {
                                        offset: 0,
                                        color: '#00FFE5'
                                    }
                                ],
                                globalCoord: false
                            },
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: '#0061A2'
                                    },
                                    {
                                        offset: 0,
                                        color: '#00FFE5'
                                    }
                                ],
                                globalCoord: false
                            }
                        ],
                        data: [
                            data1,data1,data1
                        ],
                        label: {
                            formatter: [`{c|${(data1 * 100).toFixed(2)}%}`].join('\n'),//传入百分数
                            rich: {
                                c: {
                                    fontSize: 20,
                                    color: '#B7C9E3',
                                    height: 30
                                },//修饰百分数字体
                            },
                        
                        },
                        outline: {
                            show: true,
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: '#2AECFF'
                            }
                        }
                    }
                ]
            };
            this.myChart2.setOption(option2);
            let option3 = {
                backgroundColor: 'transparent',
                polar: {
                    radius: ['75%', '80%'],
                    center: ['50%', '50%'],
                },
                title: [{
                    text: '流感实时患病风险',
                    x: 'center',
                    textStyle: {
                        fontSize: 25,
                        color: 'black',
                        fontFamily: '楷体' // 将字体设置为楷体
                    }

                }
                ],
                angleAxis: {
                    max: 100,
                    clockwise: false,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    { // 水波球
                        // value: 50, //  内容 配合formatter
                        type: 'liquidFill',
                        name: {
                            text: '30%',
                            textStyle: {
                                fontSize: 16, // 设置字体大小
                                color: 'white' // 设置字体颜色
                            }
                        },
                        radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
                        center: ['50%', '50%'],
                        data: [
                            data2,
                            data2,
                            data2
                        ], // data个数代表波浪数
                        backgroundStyle: {
                            borderWidth: 1,
                            color: 'rgba(62, 208, 255, 1)', // 球体本景色
                        },
                        amplitude: '6%', //波浪的振幅
                        color: [
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: '#6CDEFC',
                                    },
                                    {
                                        offset: 0,
                                        color: '#429BF7',
                                    },
                                ],
                                globalCoord: false,
                            },
                        ],
                        label: {
                            formatter: [`${(data2 * 100).toFixed(2)}%`].join('\n'),
                            fontSize: 24,
                            color: '#fff',
                        },
                        outline: {
                            show: false,
                        },
                    },
                    { // 外层虚线环
                        type: 'pie',
                        zlevel: 0,
                        silent: true,
                        radius: ['76%', '78%'],
                        z: 1,
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        data: this.Pie(),
                    },
                    { // 进度条环
                        name: '',
                        type: 'bar',
                        roundCap: true,
                        z: 2,
                        showBackground: false,
                        data: [rate * 100],
                        coordinateSystem: 'polar',
                        barWidth: 30, //大的占比环
                        itemStyle: {
                            opacity: 1,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                {
                                    offset: 0,
                                    color: '#19A4BB',
                                },
                                {
                                    offset: 1,
                                    color: '#22C7DA',
                                },
                            ]),
                        },
                    },
                ],
            };
            this.myChart3.setOption(option3);
            let option4 = {
                backgroundColor: 'transparent',
                title: [{
                    text: '猩红热实时患病风险',
                    x: 'center',
                    textStyle: {
                        fontSize: 25,
                        color: 'black',
                        fontFamily: '楷体' // 将字体设置为楷体
                    }

                }],
                angleAxis: {
                    polarIndex: 0,
                    min: 0,
                    max: 100,
                    show: false,
                    // startAngle:90,
                    clockwise: false
                },
                radiusAxis: {
                    type: 'category',
                    min: 10,
                    max: 10,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                polar: {
                    center: ['50%', '50%'], //中心点位置
                },
                series: [
                    {
                        type: 'liquidFill',
                        radius: '70%',
                        center: ['50%', '50%'],
                        data: [data3, data3 / 1.1, data3 / 1.2], // data个数代表波浪数
                        backgroundStyle: {
                            borderWidth: 1,
                            color: 'transparent',
                        },
                        label: {
                            formatter: [`{c|${(data3 * 100).toFixed(2)}%}`].join('\n'),//传入百分数
                            rich: {
                                c: {
                                    fontSize: 20,
                                    color: '#B7C9E3',
                                    height: 30
                                },
                            },
                        },
                        outline: {
                            show: false,
                        },
                    },
                    {
                        type: 'bar',
                        z: 10,
                        name: '外环',
                        data: [value * 100],
                        showBackground: true,
                        backgroundStyle: {
                            color: '#282C31',
                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: {
                                    // 完成的圆环的颜色
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#A098FC', // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.3,
                                            color: '#4386FA', // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.6,
                                            color: '#4FADFD', // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.8,
                                            color: '#0CD3DB', // 100% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#646CF9', // 100% 处的颜色
                                        },
                                    ],
                                },
                            },
                        },
                    },
                ],
            };
            this.myChart4.setOption(option4);
        }
    }
    },
    // 建立socket连接
    created() {
      // 创建WebSocket连接
      var clientId = Math.random().toString(36).substr(2);
      this.socket = new WebSocket('ws://localhost:8080/ws/' + clientId)
      // 监听WebSocket连接打开事件
      this.socket.onopen = (event) => {
        console.log('WebSocket connection opened', event);
        // 连接打开后，可以发送数据到服务器
        this.socket.send('Hello Server!');
      }
      
      // 监听WebSocket错误事件
      this.socket.onerror = (error) => {
        console.error('WebSocket error observed:', error);
      }
      // 监听WebSocket关闭事件
      this.socket.onclose = (event) => {
        console.log('WebSocket connection closed', event);
      };
    },
    mounted() {
        
        this.myChart1 = echarts.init(document.getElementById("main1"));
        this.myChart2 = echarts.init(document.getElementById("main2"));
        

        this.myChart3 = echarts.init(document.getElementById("main3"));
        

        this.myChart4 = echarts.init(document.getElementById("main4"));
        console.log('begin')
        this.show()
        
    },
};
</script>

<style scoped>
.container {
    width: 100%;
    height: 1019px;
    padding-top: 60px;
    /* background-color: #f0f2f5; */
    background: url(../../../public/image/back8.jpg);
}

#main1 {
    width: 1740px;
    height: 534px;
    /* border-radius: 10px; */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    background-color: white;
    margin-top: 0px;
    margin-left: 90px;
    margin-right: 90px;
}

#littleframe {
    display: flex;
    justify-content: space-around;
}

#main2,
#main3,
#main4 {
    width: 450px;
    height: 450px;
    border-radius: 10px;
    margin-top: 19px;
    background-color: white;
}
</style>